<template>
    <!-- el-card悬浮框 -->
    <el-card>
        <el-row :gutter="20" class="header">
            <el-col :span="7">
                <el-input
                        placeholder="请输入搜索内容"
                        v-model="queryForm.query"
                        clearable
                ></el-input>
            </el-col>
            <el-button type="button" :icon="Search" @click="initAddressList">搜索</el-button>
        </el-row>
        <el-table :data="tableData" height="500" style="width: 100%">
            <el-table-column prop="id" label="#id" width="80" />
            <el-table-column prop="openid" label="用户唯一标识符" width="150" />
            <el-table-column prop="userName" label="收货人姓名" width="100" />
            <el-table-column prop="telNumber" label="联系电话" width="120" />
            <el-table-column prop="address" label="省市县" width="200" />
            <el-table-column prop="detailInfo" label="详细地址" width="250" />
            <el-table-column prop="isDefault" label="是否默认地址" width="120" align="center">
                <template v-slot="{row}">
                    <el-switch v-model="row.isDefault" disabled></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" width="200" fixed="right">
                <template v-slot="scope">
                    <el-button type="primary" :icon="Edit" @click="handleDialogOpen(scope.row)">编辑</el-button>
                    <el-button type="danger" :icon="Delete" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
                v-model:current-page="queryForm.pageNum"
                v-model:page-size="queryForm.pageSize"
                :page-sizes="[10, 20, 30, 40, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </el-card>
    <!-- 使用地址编辑对话框子组件 -->
    <Details
            v-model="dialogVisible"
            :dialogTitle="dialogTitle"
            :selectedAddress="selectedAddress"
            @initAddressList="initAddressList"
    ></Details>
</template>

<script setup>
import { ref } from "vue";
import { Edit, Delete, Search } from "@element-plus/icons-vue";
import axios from "@/util/axios";
import { ElMessage, ElMessageBox } from "element-plus";
// 引入地址编辑对话框子组件
import Details from "./components/details.vue";

const queryForm = ref({
    query: "",
    pageNum: 1,
    pageSize: 10
});

const total = ref(0);

const tableData = ref([]);

// 定义是否显示地址编辑对话框，默认false
const dialogVisible = ref(false);
const dialogTitle = ref("编辑地址");

// 用于存储选中的地址数据
const selectedAddress = ref(null);

// 初始化地址列表
const initAddressList = async () => {
    try {
        const res = await axios.post("admin/address/list", queryForm.value);
        if (res.data && res.data.addressList) {
            // 对addressList中的isDefault字段进行类型转换
            const processedList = res.data.addressList.map(item => {
                item.isDefault = item.isDefault === 1;
                return item;
            });
            tableData.value = processedList;
            total.value = res.data.total;
        } else {
            console.error('后端返回的数据结构不符合预期');
        }
    } catch (error) {
        console.error('获取地址列表失败', error);
        ElMessage.error('获取地址列表失败，请检查网络或联系管理员');
    }
};

initAddressList();

// 实现页数，分页处理
const handleSizeChange = (pageSize) => {
    queryForm.value.pageNum = 1;
    queryForm.value.pageSize = pageSize;
    initAddressList();
};
const handleCurrentChange = (pageNum) => {
    queryForm.value.pageNum = pageNum;
    initAddressList();
};

// 删除功能
const handleDelete = (id) => {
    ElMessageBox.confirm("是否确定删除该地址？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    })
        // 执行成功
      .then(async () => {
            let res = await axios.get(`/admin/address/delete/${id}`);
            if (res.data.code == 0) {
                ElMessage({
                    type: "success",
                    message: "删除成功"
                });
                initAddressList();
            } else {
                ElMessage({
                    type: "error",
                    message: res.data.msg
                });
            }
        })
        // 遇到异常执行
      .catch(() => {});
};

// 打开编辑对话框
const handleDialogOpen = (row) => {
    selectedAddress.value = row;
    dialogVisible.value = true;
};
</script>

<style scoped>
.header {
    padding-bottom: 16px;
    box-sizing: border-box;
}

.el-pagination {
    padding-top: 15px;
    box-sizing: border-box;
}
</style>